*{
    margin: 0;
    padding: 0;
}
body{
    height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 渐变背景 */
    background: linear-gradient(to top,#a1c4fd,#c2e9fb);
    /* 自定义属性(乔巴的翻滚角度),可通过var函数对其调用 */
    --thumb-rotate: 0deg;
}
.slider-bar{
    display: flex;
    align-items: center;
}
#slider{
    width: 90vw;
    max-width: 500px;
    /* 去除滑块控件的外貌 */
    appearance: none;
    -webkit-appearance: none;
    /* 去除背景 */
    background: none;
    /* 去除轮廓线 */
    outline: none;
}
/* 自定义滑块凹槽的样式 */
#slider::-webkit-slider-runnable-track{
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    cursor: pointer;
}
/* 自定义滑块的样式 */
#slider::-webkit-slider-thumb{
    appearance: none;
    -webkit-appearance: none;
    width: 50px;
    height: 50px;
    /* 设置背景图片 不平铺 */
    background: url('/images/159/qiaoba.png') no-repeat;
    /* 对图片进行剪切,保留原始比例 */
    background-size: cover;
    /* 设置图片定位 */
    background-position: 0 0;
    /* 默认放大1.9倍 */
    /* 通过var函数获取自定义属性--thumb-rotate,设置要旋转的角度 */
    transform: scale(1.9) rotate(var(--thumb-rotate));
    margin-top: -18px;
}
/* 自定义滑块的活动态样式 */
#slider::-webkit-slider-thumb:active{
    /* 改变背景图片定位 */
    background-position: 100% 0;
    /* 放大2倍,设置旋转角度 */
    transform: scale(2) rotate(var(--thumb-rotate));
}
.slider-bar span{
    width: 50px;
    height: 50px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 15px;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    font-size: 20px;
    font-weight: 600;
    color: #5282cb;
}